<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:jsf="http://xmlns.jcp.org/jsf"
        xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
        xmlns:ezcomp="http://xmlns.jcp.org/jsf/composite/ezcomp">
    <script>
        $(function () {
            var Height = (document.documentElement.clientHeight || document.body.clientHeight) + 175;
            document.getElementById("maintab:TreeTable:xiaokuang").style.height = Height - 400 + "px";
        });
        window.onresize = function () {
            var Height = (document.documentElement.clientHeight || document.body.clientHeight) + 175;
            document.getElementById("maintab:TreeTable:xiaokuang").style.height = Height - 1000 + "px";
        };
    </script>
    <h:form id="TreeTable">
        <!-- 面板标题 -->
        <p:panel id="treestable" style="height: 40px;font-weight: bolder;font-size: 20px;text-align: center">
            <span>人员信息</span>
        </p:panel>
        <p:menubar id="anniu">
            <f:facet name="options">
                <p:commandButton icon="fa fa-refresh" action="#{kzbd.bb('treetable').mc.shuaxin()}"
                                 disabled="#{kzbd.bb('treetable').mc.sxan}" process="@this,xiaokuang"
                                 update="msg,xiaokuang"
                                 value="刷新"/>
                <p:commandButton icon="fa fa-plus-square" action="#{kzbd.bb('treetable').mc.xinzeng()}"
                                 disabled="#{kzbd.bb('treetable').mc.sxan}" process="@this,TreeTable"
                                 update="msg,TreeTable"
                                 value="新增"/>
                <p:commandButton icon="fa fa-pencil-square-o" action="#{kzbd.bb('treetable').mc.xiugai()}"
                                 disabled="#{kzbd.bb('treetable').mc.xgan}" process="@this,TreeTable"
                                 update="msg,TreeTable"
                                 value="修改"/>
                <p:commandButton process="@this,TreeTable" update="TreeTable,msg" action="#{kzbd.bb('treetable').mc.shanchu()}"
                                 disabled="#{kzbd.bb('treetable').mc.scan}" icon="fa fa-trash" value="删除">
                    <p:confirm header="提示：" message="确认要删除此记录吗？删除后将不能恢复！" icon="fa fa-alert"/>
                </p:commandButton>
                <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
                    <p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="fa fa-check"/>
                    <p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="fa fa-close"/>
                </p:confirmDialog>
                <p:commandButton icon="fa fa-save" action="#{kzbd.bb('treetable').mc.baocun()}"
                                 process="@this,TreeTable" disabled="#{kzbd.bb('treetable').mc.bcan}"
                                 update="msg,TreeTable"
                                 value="保存"/>
                <p:commandButton icon="fa fa-times" action="#{kzbd.bb('treetable').mc.quxiao()}"
                                 process="@this,TreeTable" disabled="#{kzbd.bb('treetable').mc.qxan}"
                                 update="msg,TreeTable"
                                 value="取消"/>
            </f:facet>
        </p:menubar>

        <p:splitter style="height: 646px" id="xiaokuang">
            <p:splitterPanel size="85">
                <p:splitter>
                    <p:splitterPanel style="overflow-x:auto" styleClass="p-d-flex" size="42">
                        <p:panel id="tree_2">
                            <p:treeTable value="#{kzbd.bb('treetable').mc.root}" var="node" selectionMode="single"
                                         id="tree"
                                         dynamic="true"
                                         scrollHeight="95%">
                                <p:ajax event="select" process="@this" update="msg,maintab:TreeTable"
                                        listener="#{kzbd.bb('treetable').mc.ajax()}"/>
                                <p:column headerText="人员编码" style="text-align: center; width: 150px;">
                                    <h:outputText value="#{node.EmployeeID}"/>
                                </p:column>
                                <p:column headerText="姓名" style="text-align: center; width: 150px;">
                                    <h:panelGroup layout="block">
                                        <h:outputText value="#{node.Name}"/>
                                        <!-- 查看附件按钮 -->
                                        <p:commandButton icon="fa fa-paperclip" title="查看附件"
                                                         disabled="#{empty node.attachment}"
                                                         action="#{kzbd.bb('treetable').mc.viewAttachment(node)}"
                                                         style="margin-left: 10px;"
                                                         oncomplete="PF('attachmentDialog').show()"
                                                         update=":maintab:TreeTable:attachmentDialogContent"/>
                                    </h:panelGroup>
                                </p:column>
                            </p:treeTable>
                            <!-- 附件预览对话框 -->
                            <p:dialog widgetVar="attachmentDialog" header="附件预览" modal="true" resizable="false" width="600" height="400">
                                <h:panelGroup id="attachmentDialogContent">
                                    <!-- 图片预览 -->
                                    <p:graphicImage value="#{kzbd.bb('treetable').mc.attachmentImageStream}"
                                                    cache="false"
                                                    rendered="#{not empty kzbd.bb('treetable').mc.attachmentImage}">
                                        <f:param name="rand" value="#{java.lang.System.currentTimeMillis()}" />
                                    </p:graphicImage>
                                    <!-- PDF 预览 -->
                                    <h:outputText value="PDF 文件预览" rendered="#{not empty kzbd.bb('treetable').mc.attachmentPath and kzbd.bb('treetable').mc.attachmentPath.endsWith('.pdf')}" />
                                    <iframe src="#{kzbd.bb('treetable').mc.attachmentPath}"
                                            width="100%" height="100%"
                                            rendered="#{not empty kzbd.bb('treetable').mc.attachmentPath and kzbd.bb('treetable').mc.attachmentPath.endsWith('.pdf')}" />
                                    <!-- 不支持预览的文件类型 -->
                                    <p:outputLabel value="不支持预览此文件类型。"
                                                   rendered="#{empty kzbd.bb('treetable').mc.attachmentImage and empty kzbd.bb('treetable').mc.attachmentPath}" />
                                </h:panelGroup>
                            </p:dialog>
                        </p:panel>
                    </p:splitterPanel>
                    <p:splitterPanel styleClass="p-d-flex " size="80" style="height: 626px">
                        <p:panel id="renyuan" style="width: 100%;">
                            <div class="card" style="width: 100%;height: 626px">
                                <div style="margin-bottom: 2%">
                                    <span style="padding-right: 10px">人员编码</span>
                                    <h:outputText style="color: red" value="*"/>
                                    <p:inputText style="width: 22%" readonly="#{kzbd.bb('treetable').mc.shuru1}"
                                                 autocomplete="off"
                                                 value="#{kzbd.bb('treetable').mc.treeList.EmployeeID}"/>
                                </div>
                                <div style="margin-bottom: 2%">
                                    <span style="padding-right: 10px">人员姓名</span>
                                    <h:outputText style="color: red" value="*"/>
                                    <p:inputText value="#{kzbd.bb('treetable').mc.treeList.Name}" autocomplete="off"
                                                 readonly="#{kzbd.bb('treetable').mc.shuru1}" style="width: 22%"/>
                                </div>
                                <div style="margin-bottom: 2%">
                                    <span style="padding-right: 10px">人员职位</span>
                                    <p:inputText style="width: 22%" readonly="#{kzbd.bb('treetable').mc.shuru1}"
                                                 autocomplete="off"
                                                 value="#{kzbd.bb('treetable').mc.treeList.Position}"/>
                                </div>
                                <div style="margin-bottom: 2%">
                                    <span style="padding-right: 10px">上级编码</span>
                                    <p:inputText style="width: 22%" readonly="#{kzbd.bb('treetable').mc.shuru1}"
                                                 autocomplete="off"
                                                 value="#{kzbd.bb('treetable').mc.treeList.ManagerID}"/>
                                </div>
                                <!-- 上传附件 -->
                                <div style="margin-bottom: 2%">
                                    <span style="padding-right: 10px">上传附件</span>
                                    <p:fileUpload listener="#{kzbd.bb('treetable').mc.handleFileUpload}"
                                                  mode="advanced" update="msg" sizeLimit="10485760" multiple="false"
                                                  allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|docx?|xlsx?)$/"/>
                                </div>
                            </div>
                        </p:panel>
                    </p:splitterPanel>
                </p:splitter>
            </p:splitterPanel>
        </p:splitter>

    </h:form>
</ui:composition>